// 类比图书管理案例;
// 需求1:渲染学生列表;(封成装函数)
function initStudents() {
    axios({
        url: '/student/list'
    }).then(({
        data: res
    }) => {
        //判断
        if (res.code == 0) {
            //赋值
            tbody.innerHTML = res.data.map(item => `  
         <tr>
          <th scope="row">${item.id}</th>
          <td>${item.name}</td>
          <td>${item.age}</td>
          <td>${item.sex}</td>
          <td>${item.group}</td>
          <td>${item.phone}</td>
          <td>${item.salary}</td>
          <td>${item.truesalary}</td>
          <td>${item.province+item.city+item.county}</td>
         <td>
             <button type="button" data-id="${item.id}"class="update btn btn-primary btn-sm" 
             data-bs-toggle="modal"data-bs-target="#updateModal">修改</button>
             <button type="button" data-id="${item.id}" class="delete  btn btn-danger btn-sm">删除</button>
         </td>
         </tr>
          `).join('')
        }
    })
}
let tbody = document.querySelector('tbody')
initStudents()
// 删除功能(事件委托)
tbody.onclick = function (e) {
    // 判断是否删除按钮,如果没有选中delete就不执行
    if (!e.target.classList.contains('delete')) return
    // 询问框:if+return避免嵌套
    if (!confirm('是否确定删除')) return
    // 获取自定义属性,发送Ajax
    let id = e.target.dataset.id
    axios({
        method: 'delete',
        url: '/student/delete',
        params: {
            id
        }
    }).then(({
        data: res
    }) => {
        //判断代码
        if (res.code == 0) {
            // 成功提示
            toastr.success('恭喜你,删除学生信息成功')
            // 重新渲染
            initStudents()
        }
    })
}

// 需求3:省市三级联动;(进行封装,让他添加和修改)
// 页面一加载,立刻渲染添加和修改的省市区
function setCity(id) {
    let select1 = document.querySelector(`#${id} [name=province]`)
    axios({
        url: '/geo/province'
    }).then(({
        data: res
    }) => {
        // console.log(res);
        //生成多个option,渲染给对应的select
        // 定义一个数组,设置默认值
        let arr = ['<option  value="">--省--</option>']
        // 遍历数据,生成多个option,添加到数组
        res.forEach(item => {
            arr.push(`<option value="${item}">${item}</option>`)
        });
        // 渲染
        select1.innerHTML = arr.join("");
    })
    let select2 = document.querySelector(`#${id} [name=city]`)
    // 渲染市(省份选择后才能触发,需要出发-onchange)
    select1.onchange = function () {
        select3.innerHTML = '<option  value="">--县/区--</option>'
        if (this.value == '') {
            select2.innerHTML = '<option  value="">--市--</option>'
            return
        }
        axios({
            method: 'get',
            url: '/geo/city',
            params: {
                pname: this.value
            }
        }).then(({
            data: res
        }) => {
            // 参数依然需要结构,因为里面还留有这个属性,只不过res里面只有一个数组
            let arr = ['<option  value="">--市--</option>']
            // 遍历数据,生成多个option,添加到数组
            res.forEach(item => {
                arr.push(`<option value="${item}">${item}</option>`)
            });
            // 渲染
            select2.innerHTML = arr.join("")
        })
    }
    let select3 = document.querySelector(`#${id} [name=county]`)
    // 渲染市(省份选择后才能触发,需要出发-onchange)
    select2.onchange = function () {
        if (this.value == '') {
            select3.innerHTML = '<option  value="">--县/区--</option>'
        }
        axios({
            method: 'get',
            url: '/geo/county',
            params: {
                pname: select1.value,
                cname: select2.value
            }
        }).then(({
            data: res
        }) => {
            // 参数依然需要结构,因为里面还留有这个属性,只不过res里面只有一个数组
            let arr = ['<option  value="">--县/区--</option>']
            // 遍历数据,生成多个option,添加到数组
            res.forEach(item => {
                arr.push(`<option value="${item}">${item}</option>`)
            });
            // 渲染
            select3.innerHTML = arr.join("")
        })
    }
}
// 添加和修改模块,渲染省市区三级联动
setCity('addModal')
setCity('updateModal')


// 添加学员
let formAdd = document.querySelector('#addModal form')
formAdd.onsubmit = function (e) {
    // 阻止默认提交
    e.preventDefault();
    // 发送Ajax
    axios({
        method: 'POST',
        url: '/student/add',
        data: $(this).serialize()
    }).then(({
        data: res
    }) => {
        // 判断业务状态码
        if (res.code == 0) {
            // 提示
            toastr.success('恭喜你,添加用户成功')
            // 关闭对话框,重新渲染
            document.querySelector('#addModal .btn-close').click()
            initStudents()
            // 重置表单
            formAdd.reset()
        }
    })
}

//点击修改按钮,渲染学生信息
tbody.onclick = function (e) {
    // 判断是否点击修改按钮
    if (!e.target.classList.contains('update')) return
    // 获取自定义属性
    let id = e.target.dataset.id
    axios({
            method: 'get',
            url: '/student/one',
            params: {
                id
            }
        })
        .then(({
            data: res
        }) => {
            if (res.code == 0) {
                // 渲染
                document.querySelector('#updateModal [name=name]').value = res.data.name
                document.querySelector('#updateModal [name=age]').value = res.data.age
                document.querySelector('#updateModal [name=phone]').value = res.data.phone
                document.querySelector('#updateModal [name=salary]').value = res.data.salary
                document.querySelector('#updateModal [name=truesalary]').value = res.data.truesalary
            }
            // 单选按钮 性别
            let inps = document.querySelectorAll('#updateModal [name=sex]')
            for (let i = 0; i < inps.length; i++) {
                inps[i].checked = res.data.sex == inps[i].value
            }
            // 下拉菜单
            document.querySelector('#updateModal [name=group]').value = res.data.group
            document.querySelector('#updateModal [name=province]').value = res.data.province
            //   市和县需要Ajax渲染
            document.querySelector('#updateModal [name=city]').innerHTML = `<option  value="${res.data.city}">${res.data.city}</option>`
            document.querySelector('#updateModal [name=county]').innerHTML = `<option  value="${res.data.county}">${res.data.county}</option>`
            // 修改
            document.querySelector('#updateModal [name=id]').value = res.data.id
        });
}


// 修改用户信息
let forUpdate = document.querySelector('#updateModal form')
forUpdate.onsubmit = function (e) {
    e.preventDefault()
    axios({
        method: 'put',
        url: '/student/update',
        data: $(this).serialize()
    }).then(({
        data: res
    }) => {
        // 判断业务状态码
        if (res.code == 0) {
            // 提示
            toastr.success('恭喜你,修改学生信息成功')
            // 刷新页面
            initStudents()
            // 关闭对话框,重新渲染
            document.querySelector('#updateModal .btn-close').click()
        }
    })
}